import React, { useState, useRef } from 'react'
import {
  Dimensions, Text, View, SafeAreaView, Image,
} from 'react-native'
import Carousel, { ICarouselInstance } from 'react-native-reanimated-carousel'
import { RouterKey } from '@NAVIGATION/NavigationType'
import Navigation from '@NAVIGATION/Navigation'
import useParams from '@HOOKS/useParams'
import EStyleSheet from 'react-native-extended-stylesheet'
import Images from '@IMAGE'
import LinearGradientButton from '@COMPONENTS/button/LinearGradient'

const data = [
  {
    title: '取下电极上的保护膜',
    desc: '请将保护膜保存好，以备后续使用',
  },
  {
    title: '将设备放在上臂外侧',
    desc: '器械应放置在上臂外侧，肘部和肩部之间',
  },
  {
    title: '把袖标调整到您的尺寸',
    desc: '有四种尺寸供您选择（S、M、L、XL）',
  },
  {
    title: '用臂带裹住您的手臂',
    desc: '可将臂带插入您尺寸的扣环，并将臂带绕在\n设备上，缠绕贴紧',
  },
  {
    title: '在偏头痛或先兆发作的60分钟内开始治疗',
    desc: '可根据自身承受程度，增强/降低刺激强度',
  },
]

const DeviceGuide: React.FC = () => {
  const navProps = useParams<RouterKey.DeviceGuide>()
  const showHeader = !!(navProps?.title)
  const { width } = Dimensions.get('window')
  const [idx, setIndex] = useState(0)
  const ref = useRef() as React.Ref<ICarouselInstance>
  const isLast = idx === data.length - 1
  const skipToHome = () => !isLast && Navigation.replace(RouterKey.Root)
  const onNext = () => {
    if (!isLast) {
      // @ts-ignore
      ref?.current.next({ count: 1 })
      setIndex(idx + 1)
    } else if (showHeader) { Navigation.goBack() } else { Navigation.replace(RouterKey.Root) }
  }
  const onSnapToItem = (index: number) => {
    setIndex(index)
  }
  return (
    <SafeAreaView style={styles.container}>
      { !showHeader && (
        <Text style={[styles.skip, isLast && styles.hidden]} onPress={skipToHome}>
          跳过
        </Text>
      ) }
      <Carousel
        ref={ref}
        loop={false}
        width={width}
        style={styles.carousel}
        autoPlay={false}
        autoFillData={false}
        data={data}
        vertical={false}
        defaultIndex={0}
        onSnapToItem={onSnapToItem}
        panGestureHandlerProps={{
          activeOffsetX: [-10, 10],
        }}
        renderItem={({ index, item }) => (
          <View key={index} style={styles.item}>
            <Text style={styles.title}>{item.title}</Text>
            <Text style={styles.desc}>{item.desc}</Text>
            <View style={styles.imageContainer}>
              <Image
                style={styles.image}
                source={Images.deviceGuide[`guide${index}` as keyof typeof Images.deviceGuide]}
              />
            </View>
          </View>
        )}
      />

      <View style={styles.pagination}>
        {data.map((v, i) => (
          <View
            key={v.title}
            style={[
              styles.paginationItem,
              idx === i && styles.paginationActive,
            ]}
          />
        ))}
      </View>
      <LinearGradientButton style={[styles.button, styles.next]} onPress={onNext}>
        <Text style={styles.buttonText}>{isLast ? '我知道了' : '继续'}</Text>
      </LinearGradientButton>
    </SafeAreaView>
  )
}

export default DeviceGuide

const styles = EStyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '$bgColor',
  },
  skip: {
    width: 'auto',
    fontSize: 16,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: '400',
    color: '#595959',
    textAlign: 'right',
    paddingRight: 16,
    paddingTop: 8,
    paddingBottom: 14,
  },
  hidden: {
    opacity: 0,
  },
  carousel: {
    flex: 1,
  },
  item: {
    paddingTop: 36,
    paddingLeft: 28,
    flex: 1,
  },
  title: {
    fontSize: 24,
    fontFamily: 'AlibabaPuHuiTiB',
    color: '$fontColor',
    lineHeight: 33,
    maxWidth: 267,
  },
  desc: {
    paddingTop: 12,
    fontSize: 16,
    fontFamily: 'PingFangSC-Light',
    fontWeight: '300',
    color: '#595959',
    lineHeight: 22,
  },
  imageContainer: {
    justifyContent: 'flex-end',
    paddingBottom: 101,
    flex: 1,
  },
  image: {
    width: 319,
    height: 319,
  },
  pagination: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    transform: [{ translateY: -44 }],
  },
  paginationItem: {
    width: 8,
    height: 8,
    marginRight: 8,
    borderRadius: 4,
    backgroundColor: 'rgba(208,212,219,0.6)',
  },
  paginationActive: {
    width: 14,
    backgroundColor: '$theme',
  },
  button: {
    alignSelf: 'center',
    width: 206,
    height: 49,
    minHeight: 49,
    borderRadius: 25,
    marginBottom: 82,
  },
  buttonText: {
    fontSize: 18,
    fontFamily: 'PingFangSC-Medium',
    fontWeight: '500',
    color: '$white',
    lineHeight: 25,
  },
  next: {
    flex: 1,
    textAlign: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
})
